<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span v-if="web_username == 'admin'">
          调用用户：
          <el-select
            style="width: 150px"
            v-model="getReviewdata.username"
            placeholder="请选择用户名称"
            clearable
          >
            <el-option
              :label="item.value"
              :value="item.key"
              v-for="(item, index) in userNameSelect"
              :key="index"
            >
            </el-option>
          </el-select>
        </span>
        审核状态：
        <el-select
          style="width: 100px"
          clearable
          v-model="getReviewdata.status"
          placeholder="请选择"
        >
          <el-option
            v-for="item in statusoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        手机号码：
        <el-input
          style="width: 150px"
          clearable
          v-model="getReviewdata.mdn"
          placeholder="请输入手机号码"
        ></el-input>
        真实姓名：<el-input
          clearable
          style="width: 100px"
          v-model="getReviewdata.name"
          placeholder="姓名"
        ></el-input>
        身份证号：<el-input
          clearable
          style="width: 150px"
          v-model="getReviewdata.idNo"
          placeholder="身份证"
        ></el-input>
        <br /><br />
        开始时间：
        <el-date-picker
          clearable
          style="width: 150px"
          v-model="getReviewdata.startTime"
          type="date"
          placeholder="开始日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
        结束时间：
        <el-date-picker
          style="width: 150px"
          clearable
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="getReviewdata.endTime"
          type="date"
          placeholder="结束日期"
        >
        </el-date-picker>
        &nbsp;
        <el-button type="primary" @click="queryreview()">查询</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="复核日期"
          width="180"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="username"
          label=" 调用账户"
          width="120"
        >
        </el-table-column>
        <el-table-column align="center"  width="250" label="apikey">
          <template slot-scope="scope">
            <span v-show="false">{{
              (obj = JSON.parse(scope.row.result))
            }}</span>
            <span>{{ obj.apikey }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="真实姓名" width="80">
          <template slot-scope="scope">
            <span v-show="false">{{
              (obj = JSON.parse(scope.row.result))
            }}</span>
            <span>{{ obj.name }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="身份证号" width="180">
          <template slot-scope="scope">
            <span v-show="false">{{
              (obj = JSON.parse(scope.row.result))
            }}</span>
            <span>{{ obj.idNo }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="手机号码" width="110">
          <template slot-scope="scope">
            <span v-show="false">{{
              (obj = JSON.parse(scope.row.result))
            }}</span>
            <span>{{ obj.mdn }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" width="300px" label="信息">
          <template slot-scope="scope">
            <span v-show="false">{{
              (obj = JSON.parse(scope.row.result))
            }}</span>
            <span>{{ obj.message }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <span style="color: red" v-if="scope.row.status == 0">未审核</span>
            <span style="color: green" v-if="scope.row.status == 1"
              >已审核</span
            >
          </template>
        </el-table-column>

        <el-table-column align="center" prop="reviewTime" width="130px" label="复核时间">
        </el-table-column>
        <el-table-column align="center" prop="reviewUser" width="80px" label="复核人员">
        </el-table-column>
        <el-table-column align="center" prop="msg" label="复核结果">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button
              v-if="web_username == 'admin'"
              @click="fhClick(scope.row)"
              type="text"
              size="small"
              >复核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="复核信息"
        center
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-tag>Time</el-tag>{{ this.dialogdata.time }}
        <br />
        <br />
        <el-tag>结果：</el-tag>{{ this.dialogdata.message }}
        <br />
        <br />
        <el-tag>接口：</el-tag>{{ this.dialogdata.apikey }}
        <br />
        <br />
        <el-tag>参数：</el-tag>
        <span v-if="this.dialogdata.name"
          >"name":"{{ this.dialogdata.name }}",</span
        >
        <span v-if="this.dialogdata.mdn">
          "mdn": "{{ this.dialogdata.mdn }}",</span
        >
        <span v-if="this.dialogdata.idNo">
          "idNo":"{{ this.dialogdata.idNo }}",</span
        >
        <br />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-dialog
        title="进行复核"
        center
        :visible.sync="dialogVisible1"
        width="30%"
      >
        <el-tag>复核结果：</el-tag>
        <el-input
          v-model="reviewdata.message"
          placeholder="请输入内容"
        ></el-input>
        <el-tag>复核人员：</el-tag>
        <el-input
          v-model="reviewdata.reviewUser"
          placeholder="请输入内容"
        ></el-input>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="fhok()">确 定</el-button>
        </span>
      </el-dialog>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.getReviewdata.currentPage"
        :page-sizes="[5,10, 20, 30, 40]"
        :page-size="this.getReviewdata.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.getReviewdata.totalCount"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getReview, getUsername, updateReview } from "../../../api/sys";
export default {
  async created() {
    this.web_username = this.$store.state.user.role;
    this.getReviewdata.username = window.localStorage.getItem("username");
    let name = await getUsername();
    this.userNameSelect = name.data;
    let a = await getReview();
    console.log(a);
    this.tableData = a.data.pageList;
    this.getReviewdata.totalCount = a.data.totalCount;
    this.getReviewdata.pageSize = a.data.pageSize;
    this.getReviewdata.pageCode = a.data.pageCode;
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisible1: false,
      userNameSelect: [],
      statusoptions: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "未审核",
        },
        {
          value: "1",
          label: "已审核",
        },
      ],
      getReviewdata: {
        username: "",
        status: "",
        mdn: "",
        name: "",
        idNo: "",
        startTime: "",
        endTime: "",
        totalCount: 0,
        currentPage: 1,
        pageSize: 10,
        pageNum: 1,
      },
      dialogdata: {
        apikey: "",
        name: "",
        idNo: "",
        mdn: "",
        time: "",
        code: "",
        message: "",
      },
      tableData: [],
      reviewdata: {
        id: "",
        status: "",
        message: "",
        reviewUser: "",
      },
    };
  },
  methods: {
    // 查询
    async queryreview() {
      let a = await getReview(this.getReviewdata);
      console.log(a);
      this.tableData = a.data.pageList;
      this.getReviewdata.totalCount = a.data.totalCount;
      this.getReviewdata.pageSize = a.data.pageSize;
      this.getReviewdata.pageNum = a.data.pageCode;
    },
    // 点击查看
    handleClick(row) {
      console.log(row);
      this.dialogVisible = true;
      this.dialogdata.time = row.createTime;
      let a = JSON.parse(row.result);
      console.log(a);
      this.dialogdata.apikey = a.apikey;
      this.dialogdata.name = a.name;
      this.dialogdata.mdn = a.mdn;
      this.dialogdata.idNo = a.idNo;
      let b = JSON.parse(a.message);
      this.dialogdata.code = b.code;
      this.dialogdata.message = b.message;
    },
    // 点击复核
    fhClick(row) {
      if (row.status == 0) {
        this.dialogVisible1 = true;
        this.reviewdata.id = row.id;
        this.reviewdata.status = 1;
        console.log(row);
      } else {
        this.$message("已审核");
      }
    },
    // 复核确认
    async fhok() {
      if (this.reviewdata.message && this.reviewdata.reviewUser) {
        this.dialogVisible1 = false;
        await updateReview(this.reviewdata);
        this.queryreview();
      } else {
        this.$message("必须填写复核结果/复核人员");
      }
    },
    // 分页/*  */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.getReviewdata.pageSize = val;
      this.queryreview();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getReviewdata.pageNum = val;
      this.queryreview();
    },
  },
};
</script>
